<template>
	<view :style="viewColor">
		<view class="card">
			<view class="title">
				<p>访问轨迹详情</p>
			</view>
			<view class="accessRankingContent" v-if="AIDate&&AIDate.length>0">
				<view v-for="(item,index) in AIDate" class="infoList">
					<view class="infoItem">
						<view :class="index == 0 ? 'one' : (index == 1 ? 'two' : (index == 2 ? 'three' : '' ) ) ">
							{{index+1}}
						</view>
						<image :src="item.avatar" @click="goSx(item)"></image>
						<view class="info">
							<view class="topView">
								<view class="leftView">
									<text>{{item.name}}</text>
								</view>
								<view class="centerView">
									<text @click="bdPhone(item.phone)">{{item.phone}}</text>
								</view>
								<view class="rightView">
									<!-- <p>{{item.add_time}}</p> -->
								</view>
							</view>
							<view class="timeView">
								<p>{{item.add_time}}</p>
							</view>
							<view class="bottomView">
								<view class="left">
									<!-- <text @click="bdPhone(item.phone)">{{item.phone}}</text> -->
									<p v-if="item.type == 0 && item.num < 4">
										正在查看你的名片第<text>{{item.num}}</text>次，现在沟通，效率更高哦
									</p>
									<p v-if="item.type == 0 && item.num >= 4">
										正在查看你的名片第<text>{{item.num}}</text>次，成交有希望</p>
									<p v-if="item.type == 2 && item.num < 4 ">
										正在查看你的官网第<text>{{item.num}}</text>次，有望合作</p>
									<p v-if="item.type == 2 && item.num >= 4">
										正在查看你的官网第<text>{{item.num}}</text>次，可标记为重点客户</p>
									<p v-if="item.type == 1 ">正在查看你的商品第<text>{{item.num}}</text>次</p>
									<p v-if="item.type ==4">转发了你的名片第<text>{{item.num}}</text>次</p>
									<p v-if="item.type ==3">复制了你的微信第<text>{{item.num}}</text>次</p>
								</view>
								<!-- <view class="right">
									<image @click="goSx(item)" src="https://wdmp22.ysxtcn.cn/static/images/sx.png"
										mode="aspectFill"></image>
								</view> -->
							</view>
						</view>
						<view class="right">
							<image @click="goSx(item)" src="https://wdmp22.ysxtcn.cn/static/images/sx.png"
								mode="aspectFill"></image>
						</view>
					</view>
					<view class="shop" v-if="item.type == 1 && item.product" @click="goShop(item.product.product_id)">
						<image :src="item.product.image" mode="aspectFit"></image>
						<text>{{item.product.store_name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		aiLog,
	} from '@/api/userminp.js'
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				uid: '',
				AIDate: {},
			}
		},
		onLoad(option) {
			this.uid = option.uid
			if (this.viewColor) {
				var arr = this.viewColor.split(";")
				for (var i = 0; i < arr.length; i++) {
					if (arr[i].indexOf("--view-theme") != -1) {
						var col = arr[i].split(": ");
						uni.setNavigationBarColor({
							frontColor: '#ffffff',
							backgroundColor: col[1]
						})
					}
				}
			}
			this.getAiLog()
		},
		methods: {
			getAiLog() {
				aiLog({
					uid: this.uid
				}).then(res => {
					console.log(res);
					this.AIDate = res.data
				})
			},
			goShop(id) {
				uni.navigateTo({
					url: '/pages/goods_details/index?id=' + id
				})
			},
			//发私信
			goSx(item) {
				console.log(item);
				let service_id = item.kefu_id
				if (service_id) {
					return uni.navigateTo({
						url: `/pages/chat/customer_list/chat?mer_id=0&service_id=` + service_id
					})
				}
			},
			//拨打电话
			bdPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
		},
		computed: {
			...mapGetters({
				viewColor: 'viewColor',
			})
		},
	}
</script>

<style lang="scss">
	.card {
		padding: 40rpx;

		.title {
			color: var(--view-theme);
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 50rpx;
		}


		.accessRankingContent {
			.infoList {

				margin-bottom: 20rpx;

				.infoItem {
					display: flex;
					align-items: center;

					.one {
						color: var(--view-theme);
						font-weight: 800;
					}

					.two {
						color: var(--view-theme);
						font-weight: 600;
					}

					.three {
						color: var(--view-theme);
					}

					.info {
						flex: 1;
						margin-right: 20rpx;

						.topView {
							margin-bottom: 10rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.leftView {
								width: 100rpx;
								white-space: nowrap;
								/* 防止文字换行 */
								overflow: hidden;
								/* 隐藏超出容器的内容 */
								text-overflow: ellipsis;

								/* 多余的文字用省略号显示 */
								text {
									color: #000000;
									font-size: 28rpx;
								}

							}

							.centerView {
								flex: 1;

								text {
									color: #000000;
									font-size: 28rpx;
								}
							}

							.rightView {
								flex: 1;
								text-align: right;

								p {
									color: #777777;
									font-size: 24rpx;
								}
							}
						}

						.timeView {
							margin-bottom: 10rpx;

							p {
								color: #777777;
								font-size: 24rpx;
							}
						}

						.bottomView {
							display: flex;
							align-items: center;

							.left {
								flex: 1;

								p {
									color: #999999;
									font-size: 26rpx;
									// text {
									// 	color: #000000;
									// }
								}
							}

							.right {
								margin-left: 20rpx;
								margin-left: auto;

								image {
									width: 40rpx;
									height: 40rpx;
								}
							}
						}
					}

					.right {
						margin-left: 20rpx;
						margin-left: auto;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
						margin-left: 20rpx;
					}
				}

				.shop {
					display: flex;
					align-items: center;
					padding: 20rpx 60rpx;
					border-bottom: 2rpx solid #EEEEEE;

					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 16rpx;
						margin-right: 30rpx;
					}

					text {
						flex: 1;
						color: #000000;
						font-size: 26rpx;
						line-height: 40rpx;
					}
				}
			}


		}
	}
</style>